<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺详情</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .title {
            width: 300px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: skyblue;
            font-weight: 700;
            font-size: 18px;
        }

        .products-box {
            /* margin-top: 15px; */
            margin-left: 112px;
        }

        /* .soling {
            background-color: #fff;
        } */

        .product {
            position: relative;
            display: inline-block;
            height: 300px;
            width: 195px;
            padding: 15px;
            padding-bottom: 5px;
            margin-left: 15px;
            margin-top: 15px;
            background-color: #fff;
            overflow: hidden;
        }

        .product img {
            height: 225px;
            width: 165px;
        }

        .price {
            color: red;
            font-size: 15px;
        }

        .price-strike {
            float: right;
            font-size: 10px;
            color: #aaa;
            text-decoration: line-through;
            margin-top: 4px;
        }

        .msg {
            font-size: 13px;
        }

        .product-title {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            background-color: pink;
            margin-top: 15px;
        }

        .soledown {
            position: relative;
        }

        .bc-div {
            position: absolute;
            top: 0;
            left: 0;
            height: 300px;
            width: 195px;
            background-color: RGBa(240, 226, 226, 0.3);
        }

        .downgoods {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            height: 300px;
            width: 195px;
            background-color: RGBa(0, 0, 0, 0.5);
        }

        .downgoods label {
            color: #fff;
        }

        .detail,
        .down {
            height: 30px;
            width: 60px;
            background-color: skyblue;
        }

        .detail {
            position: absolute;
            left: 24px;
            top: 120px;
        }

        .down {
            position: absolute;
            right: 24px;
            top: 120px;
            color: #0F6CB2;
        }

        .up {
            text-align: center;
            line-height: 300px;
        }

        .rightLink {
            float: right;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class="body">
            <div class="title">店铺详情</div>
            <a href="storeOrder.html" th:href="|/User/storeOrder?storeName=${storeName}|" class="rightLink">订单确认(<span th:text="${orderCount}">0</span>)</a>
            <div class="products-box">
                <div class='row'>
                    <div class="product-title">销售中商品</div>
                    <div class="product  " th:each="product:${products}">
                        <img src="assets\images\products\p1.jpg" th:src="@{${product.goodsPicture1}}" alt="商品图片">
                        <div class="price-box">
                            <span class="price">￥<b th:text="${product.price}">1086.00</b></span>
                            <span class="price-strike">￥<span th:text="${product.oldPrice}">10086.00</span></span>
                        </div>
                        <div class="msg" title="Java基础" th:title="${product.goodsName}" th:text="${product.goodsName}">
                            Java基础
                        </div>
                        <div class="downgoods">
                            <label for="newPrice">新价格:</label>
                            <input type="text" id="newPrice">
                            <a href="upgoods.html" th:href="@{#}">
                                <button class="detail" id="update">修改</button>
                            </a>
                            <button class="down" id="1" th:id="${product.goodsId}">下架</button>
                        </div>
                    </div>
                    <div class="product up">
                        <a href="upgoods.html" th:href="@{/User/upgoods}">上架商品</a>
                    </div>
                </div>
                <div class='row'>
                    <div class="product-title">售罄商品</div>
                    <div class="product soledown" th:each="downProduct:${downProducts}">
                        <a href="upgoods.html"><img src="assets\images\products\p1.jpg"
                                                    th:src="@{${downProduct.goodsPicture1}}" alt="商品图片"></a>
                        <div class="price-box">
                            <span class="price">￥<b th:text="${downProduct.price}">1086.00</b></span>
                            <span class="price-strike">￥<span th:text="${downProduct.oldPrice}">10086.00</span></span>
                        </div>
                        <div class="msg" title="Java基础" th:title="${downProduct.goodsName}"
                             th:text="${downProduct.goodsName}">
                            Java基础
                        </div>
                        <div class="bc-div"></div>
                        <div class="downgoods">
                            <label for="count">添加数量:</label>
                            <input type="text" id="count">
                            <button class="detail" id="upCount">添加</button>
                            <button class="down" id="2" th:id="${downProduct.goodsId}">下架</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="in-product">

            </div>
        </div>
    </div>
</div>
</div>


<script src="assets/js/jquery-1.11.1.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $(".product").mouseenter(function () {
            $(this).children(".downgoods").show();
        });
        $(".product").mouseleave(function () {
            $(this).children(".downgoods").hide();
        });

        $("#upCount").click(function () {
            var count = $("#count").val();
            var goodsId = $(this).siblings(".down").attr("id");
            if (count == null || count == "" || isNaN(count)) alert("请输入正确的数字!!");
            $.ajax({
                type: "post",
                url: "/User/upCount/data",
                // dataType: "JSON",
                data: {
                    count: count,
                    goodsId: goodsId
                },
                success: function (data) {
                    window.location.href = "/User/store";
                    console.log(data);
                }
            });
        });

        $(".down").click(function () {
            var id = $(this).attr("id");
            // console.log(id);
            $.ajax({
                type: "post",
                url: "/User/deleteGoods/data",
                data: {
                    goodsId: id
                },
                success: function (data) {
                    window.location.href = "/User/store";
                    console.log("删除成功?" + data);
                }
            });
        });


        $("#update").click(function () {
            let price = $("#newPrice").val();
            let goodsId = $(this).parent().siblings(".down").attr("id");
            $.ajax({
                type: "post",
                url: "/User/updatePrice/data",
                data: {
                    price,
                    goodsId
                },
                success: function (data) {
                    console.log(data);
                    window.location.href = "/User/store";
                }
            })
        });
    });


</script>
</body>

</html>